<template>
  <div class="login">
    <Transition>
      <div class="main" v-if="switchLogin">
        <h1>光谷交通系统</h1>
        <img src="@/assets/images/用户.png" style="margin-bottom: 10px" />
        <van-form @submit="onSubmit" ref="formRef">
          <van-cell-group inset>
            <van-field
              v-model.trim="username"
              name="username"
              label="用户名"
              placeholder="用户名"
              :rules="rules.username"
            />
            <van-field
              v-model.trim="password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              :rules="rules.password"
            />
          </van-cell-group>
          <div style="margin: 16px; display: flex; justify-content: space-around">
            <van-button round type="warning" block @click="onReset"> 重置 </van-button>
            <van-button round type="primary" block native-type="submit" style="margin-left: 16px">
              登录
            </van-button>
          </div>
          <div class="memory">
            <div @click="updatePassword">忘记密码 ?</div>
            <div @click="onSwitchRegister" class="register">新用户注册</div>
          </div>
        </van-form>
      </div>
    </Transition>
    <Transition>
      <div class="main-register" v-if="switchRegister">
        <h1>注册</h1>
        <img src="@/assets/images/注册用户.png" style="margin-bottom: 10px" />
        <van-form @submit="onRegister" ref="formRef">
          <van-cell-group inset>
            <van-field
              v-model.trim="username"
              name="username"
              label="用户名"
              placeholder="请输入用户名"
              :rules="registerRules.username"
            />
            <van-field
              v-model.trim="password"
              type="password"
              name="password"
              label="密码"
              placeholder="请输入密码"
              :rules="registerRules.password"
            />
            <van-field
              v-model.trim="truename"
              name="truename"
              label="真实名字"
              placeholder="请输入真实名字"
              :rules="registerRules.truename"
            />
            <van-field
              v-model.trim="telnumber"
              name="telnumber"
              label="手机号码"
              placeholder="请输入手机号码"
              :rules="registerRules.telnumber"
            />
          </van-cell-group>
          <div style="margin: 16px; display: flex; justify-content: space-around">
            <van-button round type="warning" block @click="onReset"> 重置 </van-button>
            <van-button round type="primary" block native-type="submit" style="margin-left: 16px">
              注册
            </van-button>
          </div>
          <div class="memory-register">
            <div @click="onSwitchLogin">返回登录</div>
          </div>
        </van-form>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { useLogin } from './Hooks/useLogin'
let {
  registerRules,
  truename,
  telnumber,
  switchLogin,
  switchRegister,
  formRef,
  username,
  password,
  rules,
  onSubmit,
  onReset,
  onRegister,
  updatePassword,
  onSwitchRegister,
  onSwitchLogin,
} = useLogin()
</script>

<style scoped>
.v-enter-active {
  /* transition: all 1s ease-out; */
  animation: bounce-in 0.5s;
}
.v-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
.v-enter-from,
.v-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/images/Login-BG.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}
.login .main {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  max-height: 520px;
  width: 350px;
  align-items: center;
  background: #be5a73;
  box-shadow: 0 0 20px #000;
}
.login .main .memory {
  display: flex;
  justify-content: space-between;
  margin: 16px 40px;
  color: #f7b970;
  text-decoration: underline;
}
.login .main .memory .register {
  color: #000;
  text-decoration: underline;
}
.login .main-register {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  max-height: 700px;
  width: 350px;
  align-items: center;
  background: #5885bc;
  box-shadow: 0 0 20px #000;
}
.login .main-register .memory-register {
  display: flex;
  justify-content: space-between;
  margin: 16px 40px;
  color: #f7b970;
  text-decoration: underline;
}
.login .main-register .memory-register .register {
  color: #000;
  text-decoration: underline;
}
</style>
